import React, { useEffect, useState } from 'react';
import styles from './index.less'

import { DatePicker } from 'antd';
import moment from 'moment';
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD';


function Calendar(props) {

    const { fetchChartData } = props

    const [currentDate, setCurrentDate] = useState(null);
    const [sevenDaysAgoDate, setSevenDaysAgoDate] = useState(null);


    useEffect(() => {
        setCurrentDate(moment().endOf('day'));
        setSevenDaysAgoDate(moment().subtract(6, "days").startOf('day'));

        fetchChartData(moment().subtract(6, "days").startOf('day'), moment().format('YYYY-MM-DD'))
    }, []);


    const disabledDate = (current) => {
        const startDate = moment().subtract(6, "days").startOf('day');
        const endDate = moment().endOf('day');
        return current < startDate || current > endDate;
    };



    return (
        <div className={styles.calendarContainer}>
            <RangePicker
                value={[sevenDaysAgoDate, currentDate]}
                disabledDate={disabledDate}
                format={dateFormat}
                className={styles.rangePicker}
                onChange={(dates) => {
                    setSevenDaysAgoDate(dates[0])
                    setCurrentDate(dates[1])
                    fetchChartData(dates[0].format('YYYY-MM-DD'), dates[1].format('YYYY-MM-DD'))
                }}
            />
        </div>
    );
}

export default Calendar;